<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuerys">
        <a-form-item label="城市服务商" style="margin-right: 10px" v-has="'xhdjFundLog:select'">
          <serveSelect @selectClick="selectClick" :value="queryParam.agencyCode"></serveSelect>
        </a-form-item>
        <a-form-item label="排序方式" style="margin-right: 10px">
          <a-select v-model="queryParam.sortType" style="width: 120px" placeholder="请选择" @change="searchQuerys">
            <a-select-option value="1"> 时间排序 </a-select-option>
            <a-select-option value="2"> 预约排序 </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="开始时间" style="margin-right: 10px">
          <a-date-picker v-model="queryParam.startTime" :valueFormat="'YYYY-MM-DD'" @change="startChange" />
        </a-form-item>
        <a-form-item label="结束时间" style="margin-right: 10px">
          <a-date-picker
            v-model="queryParam.endTime"
            :valueFormat="'YYYY-MM-DD'"
            @change="endChange"
            :disabled-date="disabledDate"
          />
        </a-form-item>
        <a-button type="primary" @click="searchQuerys" icon="search">查询</a-button>
        <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
      </a-form>
    </div>

    <div class="appointmentBox">
      <div v-for="(item, index) in appointmentLise" :key="index">
        <a-tooltip :class="colorType[item.ranking]" placement="topLeft" :title="'预约占比' + item.rate + '%'">
          <div class="timeTop">{{ item.timeStr }}</div>
          <div class="timeBottom">预约数量:{{ item.count }}</div>
        </a-tooltip>
      </div>
    </div>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { coachServerTimeAnalyseList } from '@/api/manage.js'
import serveSelect from '@/components/serveSelect.vue'

export default {
  name: 'appointmenttimeList',
  components: { serveSelect },
  data () {
    return {
      description: '预约分析报表',
      queryParam: {},
      appointmentLise: [],
      colorType: {
        0: 'timeBox',
        1: 'timeRedBox',
        2: 'timeYellowBox',
        3: 'timeBlueBox'
      }
    }
  },
  methods: {
    async getcoachServerTimeAnalyseList () {
      const res = await coachServerTimeAnalyseList(this.queryParam)
      if (res.code == 200) {
        this.appointmentLise = res.result
      }
      console.log(res)
    },

    startChange (value) {
      if (value) {
        this.queryParam.startTime = value + ' 00:00:00'
      } else {
        this.queryParam.startTime = value
      }
    },

    endChange (value) {
      if (value) {
        this.queryParam.endTime = value + ' 23:59:59'
      } else {
        this.queryParam.endTime = value
      }
    },
    disabledDate (time) {
      return new Date(time).getTime() < new Date(this.queryParam.startTime).getTime()
    },
    selectClick (value) {
      this.queryParam.agencyCode = value
      //   this.searchQuery()
    },
    searchQuerys () {
      console.log('查询', this.queryParam)
      this.getcoachServerTimeAnalyseList()
    },
    searchReset () {
      this.queryParam = {}
      this.getcoachServerTimeAnalyseList()
      console.log('重置')
    }
  },
  created () {
    this.getcoachServerTimeAnalyseList()
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
.ant-row {
  display: flex;
  justify-content: flex-end;
}
.ant-col {
  display: flex;
  justify-content: flex-end;
}
.ant-form {
  display: flex;
}
.appointmentBox {
  display: flex;
  flex-wrap: wrap;
}
.timeBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px 15px 15px 0px;
  justify-content: space-evenly;
  width: 110px;
  height: 80px;
  background-color: #5ec470;
  color: #fff;
  font-size: 16px;
  border-radius: 15px;
}

.timeRedBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px 15px 15px 0px;
  justify-content: space-evenly;
  width: 110px;
  height: 80px;
  background-color: red;
  color: #fff;
  font-size: 16px;
  border-radius: 15px;
}

.timeYellowBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px 15px 15px 0px;
  justify-content: space-evenly;
  width: 110px;
  height: 80px;
  background-color: #d74aff;
  color: #fff;
  font-size: 16px;
  border-radius: 15px;
}

.timeBlueBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px 15px 15px 0px;
  justify-content: space-evenly;
  width: 110px;
  height: 80px;
  background-color: #1890ff;
  color: #fff;
  font-size: 16px;
  border-radius: 15px;
}
</style>
